<template>
  <div class="Login-container">
    <div class="languages" @click="changeLang">
      <span>{{languages}}</span>
      <div class="iconfont changeLogo"></div>
    </div>

    <!-- 注册、登陆输入框 -->
    <div class="input-box">
      <router-view></router-view>
    </div>

    <!-- 登陆、注册切换 -->
    <div class="cutoverBtn-box">
      <router-link class="logreg-btn" v-if="$store.state.btnMode" @click.native="changeMode" to="/login/regpage">
        <span>{{$t('m.goRegister')}}</span>
        <span>{{$t('m.register')}}</span>
      </router-link>
      <router-link class="logreg-btn" v-else @click.native="changeMode" to="/login/logpage">
        <span>{{$t('m.goLogin')}}</span>
        <span>{{$t('m.login')}}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      languages: '中文',
      lang: 'zh-CN'
    }
  },
  // 刷新页面后初始化路由规则
  created() {
    this.initLogPage()
  },
  methods: {
    // 触发登陆、注册按钮模式切换方法
    changeMode() {
      this.$store.commit('changeBtnMode')
    },
    // 切换语言方法
    changeLang() {
      this.languages = this.languages === '中文' ? 'English' : '中文'
      if (this.lang === 'zh-CN') {
        this.lang = 'en-US'
        this.$i18n.locale = this.lang
      } else {
        this.lang = 'zh-CN'
        this.$i18n.locale = this.lang
      }
    },
    initLogPage() {
      this.$router.push('/login/logpage')
    }
  }
}
</script>

<style lang="less">
.Login-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 640px;
  max-height: 100%;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014f48596c222ba8012193a349f9d7.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638097149&t=6d41303b9920802d3e32ece560d9aadb);
  background-size: 120% 100%;
  background-repeat: no-repeat;
}
.input-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 96%;
  // height: 45%;
  border-radius: 12px;
  background: white;
}
.cutoverBtn-box {
  display: flex;
  position: absolute;
  justify-content: center;
  width: 96%;
  height: 11%;
  bottom: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: white;
  .logreg-btn {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 12px;
    width: 93%;
    height: 54%;
    border-radius: 9px;
    border: 0.09em solid orange;
    color: orange;
    font-size: 18px;
    span:nth-child(1) {
      color: #454545;
    }
  }
}
.languages {
  position: absolute;
  display: flex;
  height: 24px;
  top: 30px;
  right: 20px;
  .changeLogo:before {
    content: '\eb0d';
    font-size: 1.2em;
    color: orange;
    line-height: 24px;
  }
  span {
    font-size: 1em;
    color: white;
    line-height: 24px;
  }
}
</style>
